<template>
	<view>
		<view class="block">
			<view class="content">
				<view class="orderinfo">
					<view class="row">
						<view class="nominal">订单名称:</view>
						<view class="text">{{orderName}}</view>
					</view>
					<view class="row">
						<view class="nominal">订单金额:</view>
						<view class="text">{{amount}}元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="title">
				选择支付方式
			</view>
			<view class="content">
				<view class="pay-list">
					<view class="row" @tap="paytype='mppay'">
						<view class="left">
							<image src="/static/index/wx.png"></image>
						</view>
						<view class="center">
							微信支付
						</view>
						<view class="right">
							<radio :checked="paytype=='mppay'" color="#2BC360" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay" v-if="isWeChat">
			<button class="btn" @tap="wxPay" :loading="loading" :disabled="loading">立即支付</button>
			<!-- <view class="tis">
				点击立即支付，即代表您同意<view class="terms" @click="pay_agree">
					《条款协议》
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		OrderPay,
		WxConfig,
		wxPay
	} from "@/api/api.js"
	import {
		OrderDetail
	} from "@/api/shop.js"
	export default {
		data() {
			return {
				loading: false,
				amount: 0,
				orderName: '',
				paytype: 'mppay', //支付类型
				pShow: false,
				password: '',
				available: true,
				choose_bank: -1,
				token_no: '',
				code: '',
				isWeChat: false
			};
		},
		filters: {
			substr(value, start, length) {
				console.log(value);
				if (value == '') return '';
				return value.substring(start, length)
			},
		},
		onLoad(e) {
			// if (e.code) {
			// 	uni.request({
			// 		url: this.$config.requestUrl + '/login/getGzUserInfo',
			// 		data: {
			// 			code: e.code
			// 		},
			// 		success: (res) => {
			// 			this.openid = res.data.data.openid
			// 		}
			// 	})
			// }
			this.order_id = e.order_id
			this.amount = parseFloat(e.amount).toFixed(2);
			this.orderName = e.order_id
			// #ifdef MP-WEIXIN
			this.isWeChat = true
			// #endif
			// #ifdef H5
			let env = this.checkEnvironment()
			this.isWeChat = env.isWeChat
			if (!this.isWeChat) {
				uni.$showMsg('请打开微信支付')
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/order/index?id=0'
					})
				}, 500)
				return
			}
			// this.wxconfig()
			// #endif

		},
		onShow() {
			this.loading = false
		},

		methods: {
			wxconfig() {
				let current_url = encodeURIComponent(location.href.split('#')[0])
				WxConfig({
					url: current_url
				}).then(res => {
					let param = res.data
					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: param.appid, // 必填，公众号的唯一标识
						timestamp: param.timeStamp, // 必填，生成签名的时间戳
						nonceStr: param.nonceStr, // 必填，生成签名的随机串
						signature: param.signature, // 必填，签名
						jsApiList: [ //这里是需要用到的接口名称  
							'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
							'scanQRCode', //扫一扫接口  
							'chooseWXPay', //微信支付  
						], // 必填，需要使用的JS接口列表
						// openId: t_openid
					});
					jweixin.ready(function(res) {
						console.log('jweixin.ready', res);
						// this.wxopenid()
					});
					jweixin.error(function(res) {
						console.log('jweixin.error', res);
					});
				})
			},
			wxPay() {
				var that = this
				wxPay({
					order_id: this.order_id,
					openid: this.openid,
				}).then(res => {
					if (res.code == 0) {
						if (res.data.unifiedorder) {
							let paymentData = res.data.unifiedorder
							that.loading = true
							uni.requestPayment({
								timeStamp: paymentData.timeStamp,
								nonceStr: paymentData.nonceStr,
								package: "prepay_id=" + paymentData.prepay_id,
								signType: 'MD5',
								paySign: paymentData.paySign,
								success: function(result) {
									uni.$showMsg('支付成功')
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/order/index'
										})
									}, 1000)
								},
								fail: function(err) {
									that.loading = false
								}
							})
						} else {
							uni.$showMsg(res.msg)
						}
					} else {
						uni.$showMsg(res.msg)
					}
					return false
					var param = JSON.parse(res.data)
					jweixin.ready((suc) => {
						console.log(suc);
						jweixin.chooseWXPay({
							timestamp: param
								.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							nonceStr: param.nonceStr, // 支付签名随机串，不长于 32
							package: param
								.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							signType: param.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							paySign: param.paySign, // 支付签名
							success: function(data) {
								// 支付成功后的回调函数
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/user/index'
									})
								})
							},
							cancel: function(data1) {
								console.log(data1);
								uni.showToast({
									title: "取消付款！",
									duration: 1000
								})
								that.loading = false
							},
							fail: function(data2) {
								console.log(data2);
								uni.showToast({
									title: "付款失败！",
									duration: 1000
								})
								that.loading = false
							}
						})
					})
				})
			},
			pay_agree() {
				uni.navigateTo({
					url: '/pages/login/pay_agree'
				})
			}
		}
	}
</script>

<style lang="scss">
	.banklist {
		.add {
			display: flex;
			align-items: center;
			font-size: 14px;
			padding: 10px 2%;
			border-bottom: 1px solid #ccc;

			text {
				margin-right: 10px;
			}
		}
	}

	.list {
		flex-wrap: wrap;

		.row {
			width: 96vw;
			padding: 20upx 2%;

			.left {
				width: 90upx;
				flex-shrink: 0;
				align-items: center;

				.head {
					display: flex;
					width: 70upx;
					height: 70upx;
					background: linear-gradient(to right, #ccc, #aaa);
					color: #fff;
					justify-content: center;
					align-items: center;
					border-radius: 60upx;
					font-size: 25upx;
				}
			}

			.center {
				width: 100%;
				flex-wrap: wrap;

				.name-tel {
					width: 100%;
					align-items: baseline;

					.name {
						font-size: 34upx;
					}

					.tel {
						margin-left: 30upx;
						font-size: 24upx;
						color: #777;
					}

					.default {

						font-size: 22upx;

						background-color: #2BC360;
						color: #fff;
						padding: 0 18upx;
						border-radius: 24upx;
						margin-left: 20upx;
					}
				}

				.address {
					width: 100%;
					font-size: 24upx;
					align-items: baseline;
					color: #777;
				}
			}

			.right {
				flex-shrink: 0;
				align-items: center;
				margin-left: 20upx;

				.icon {
					justify-content: center;
					align-items: center;
					width: 80upx;
					height: 60upx;
					border-left: solid 1upx #aaa;
					font-size: 40upx;
					color: #777;
				}
			}
		}

		.active {
			background: #d1d1d1;
			border-radius: 4px;
		}
	}

	.block {
		width: 94%;
		padding: 0 3% 40upx 3%;

		.title {
			width: 100%;
			font-size: 34upx;
		}

		.content {
			.orderinfo {
				width: 100%;
				border-bottom: solid 1upx #eee;

				.row {
					width: 100%;
					height: 90upx;
					display: flex;
					align-items: center;

					.nominal {
						flex-shrink: 0;
						font-size: 30upx;
						color: #7d7d7d;
					}

					.text {
						width: 70%;
						margin-left: 10upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 30upx;
					}
				}
			}

			.pay-list {
				width: 100%;
				border-bottom: solid 1upx #eee;

				.row {
					width: 100%;
					height: 120upx;
					display: flex;
					align-items: center;
					box-sizing: border-box;

					.left {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						align-items: center;

						image {
							width: 70upx;
							height: 70upx;
						}
					}

					.center {
						width: 100%;
						font-size: 30upx;
					}

					.right {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}

	.pay {
		margin-top: 20upx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.btn {
			width: 90%;
			height: 80upx;
			border-radius: 10upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #2BC360;
			// box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
		}

		.tis {
			margin-top: 10upx;
			width: 100%;
			font-size: 24upx;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #999;

			.terms {
				color: #5a9ef7;
			}
		}
	}
</style>